<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">评价管理</view>
		<uni-card class="card">
			<view class="items">
				<view class="items_top">
					<view class="title">
						张女士
					</view>
					<view class="btn">
						<button @click="goXiangQing">查看详情</button>
					</view>

				</view>
				<view class="items_con">
					<view class="bianhao mb20">
						订单编号：20211010831213
					</view>
					<view class="rate mb20">
						<view class="pingfen">
							综合评分：3分
						</view>
						<uni-rate v-model="rateValue" @change="onChange" size="18" />
					</view>
					<view class="time mb20">
						评价时间：2023-03-12 11:02
					</view>
				</view>
			</view>

		</uni-card>
		<uni-card class="card">
			<view class="items">
				<view class="items_top">
					<view class="title">
						张女士
					</view>
					<view class="btn">
						<button @click="goXiangQing">查看详情</button>
					</view>

				</view>
				<view class="items_con">
					<view class="bianhao mb20">
						订单编号：20211010831213
					</view>
					<view class="rate mb20">
						<view class="pingfen">
							综合评分：3分
						</view>
						<uni-rate v-model="rateValue" @change="onChange" size="18"/>
					</view>

					<view class="time mb20">
						评价时间：2023-03-12 11:02
					</view>
				</view>
			</view>

		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const rateValue = ref(0);


	function backPage(){
		uni.navigateBack()
	}

	onMounted(() => {
		// 模拟动态赋值
		setTimeout(() => {
			rateValue.value = 3;
		}, 1000);
	});

	const onChange = (e) => {
		console.log('rate发生改变:' + JSON.stringify(e));
	};
	const goXiangQing = ()=>{
		uni.navigateTo({
			url:'/pages/index/pingjia/pjxiangqing/pjxiangqing'
		})
	}
</script>

<style scoped>
	@import url('@/common/app.css');

	.mb20 {
		margin-bottom: 20rpx;
	}

	.card {
		margin: 0;
		height: 350rpx;
	}

	.items {
		height: 300rpx;
		margin: 20rpx 0;

	}

	.items_con {
		padding: 20rpx 0;
	}

	.items_top {
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 3px solid lightgray;
	}

	.btn button {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: white;
		background-color: #0863e7;
		border-radius: 60rpx;
		font-size: 26rpx;
	}

	.bianhao {
		color: #0863e7;
	}

	.rate {
		display: flex;
		justify-content: start;
		align-items: center;
		height: 50rpx;
		line-height: 50rpx;
	}

	.pingfen {
		color: black;
		
	}

	.time {
		color: gray;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
</style>